우당탕탕 반응형 정사각형 이미지 도전기
November 22, 2020
내가 원했던 것
내 화면
지금은 그래도 다 같은 이미지라서 괜찮아 보이지만… 가로가 긴 이미지와 세로가 긴 이미지가 섞여서 나오면 엉망진창이 되어버립니다.
나름의 반응형으로 만들어보겠다고 하다가 이런 사달이 났는데… 일단 반응형으로 움직이는 이미지를 담는 틀을 만드는 방법을 구글링을 통해 알아냈습니다.
width를 100%를 주고 padding-bottom을 100%를 주면 됩니다!
.imageContainer {
width: 100%;
margin-bottom: 20px;
overflow: hidden;
img {
width: 100%;
}
}이전의 코드
.imageContainer {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: 20px;
overflow: hidden;
img {
width: 100%;
position: absolute;
top: 0;
}
}수정 후 코드
이제 세로가 길쭉한 이미지들은 예쁘게 나옵니다.
하지만 문제는…
가로가 길쭉한 이미지가 나오면… 😇
그래서 찾아본것이 object-fit 속성이었는데
검색을 해 본 결과 image 태그에 width와 height 값을 지정해줘야 제대로 먹히는 것 같습니다.
.imageContainer {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: 20px;
overflow: hidden;
img {
position: absolute;
top: 0;
width: 42vh;
height: 42vh;
object-fit: cover;
}
}이미지 태그에 vh로 크기 값을 지정해주면 그래도 아래와 같이 나타납니다.
근본적인 문제가 해결이 되진 않았지만 일단 이대로 두기로 했습니다…
CSS의 세계란…
